<!--
 * @Author: lizijian
 * @Date: 2024-03-25 09:01:57
 * @LastEditTime: 2024-03-28 15:52:33
 * @FilePath: \client\src\components\global\ypdatepicker\ypdatepicker.vue
 * @Description: 日期选择组件
-->
<template>
	<div>
		<VueDatePicker
			:model-value="modelValue"
            :format="format"
            :model-type="valueFormat"
            :enable-time-picker="enableTimePicker"
			:range="range"
			:multi-calendars="multiCalendars"
			locale="zh-CN"
			:placeholder="placeholder"
			:select-text="selectText"
			:cancel-text="cancelText"
			input-class-name="dp-custom-input"
			@update:model-value="setDate"
		></VueDatePicker>
	</div>
</template>
<script setup>
	import VueDatePicker from '@vuepic/vue-datepicker'
	import '@vuepic/vue-datepicker/dist/main.css'
	const props = defineProps({
		modelValue: {
			required: true,
			type: [String, Array, null],
		},
        // 显示在输入框中的格式
        format: {
            type: String,
            default: 'yyyy-MM-dd HH:mm'
        },
        // 绑定值的格式
        valueFormat: {
            type: String,
            default: 'yyyy-MM-dd HH:mm'
        },	
        // 是否显示时间选择
        enableTimePicker: {
            type: Boolean,
            default: true
        },
		// 范围选择器模式
		range: {
			type: Boolean,
			default: false,
		},
		// 并排显示范围选择器的多个日历,默认两个
		multiCalendars: {
			type: [Boolean, Number],
			default: false,
		},
		placeholder: {
			type: String,
			default: '请选择日期',
		},
		selectText: {
			type: String,
			default: '确定',
		},
		cancelText: {
			type: String,
			default: '取消',
		},
	})
	const emits = defineEmits(['update:modelValue'])
	const setDate = (value) => {
        emits('update:modelValue', value)
    }
</script>
<style>
.dp-custom-input{
	@apply text-sm text-slate-600;
}
</style>